<template>
	<view>
		<map :style="{'width: 100%;height': (set.unit == 'vh' ? set.vh_height + 'vh' : (w * set.rpx_height) + 'px')}"
			:latitude="latitude" :longitude="longitude" :markers="set.covers == 'show' ? covers : []"
			:circles="set.circles == 'show' ? circles : []" :enable-building="set.enable_building == 0 ? false : true"
			:enable-3D="set.enable_3d == 0 ? false : true"></map>
	</view>
</template>

<script>
	export default {
		name: "diy-map",
		data() {
			return {
				id: 0,
				latitude: 39.909,
				longitude: 116.39742,
				covers: [],
				circles: [],
			}
		},
		props: {
			set: {
				type: Object,
				default () {
					return {
						default: [],
						width: '',
						unit: '',
						rpx_height: '',
						vh_height: '',
						enable_building: '',
						enable_3d: '',
						covers: '',
						icon_path: '',
						icon_width: '',
						icon_height: '',
						circles: '',
						color: '',
						fill_color: '',
						radius: '',
						stroke_width: '',
					}
				}
			}
		},
		created() {
			console.log('this.props.set ==>', this._props.set);
			if (this._props.set.default.length != 0) {
				this.latitude = this._props.set.default.center[1]
				this.longitude = this._props.set.default.center[0]
			}


			if (this._props.set.covers == 'show') {
				let obj = {
					latitude: this.latitude,
					longitude: this.longitude,
					iconPath: this._props.set.icon_path,
					width: this._props.set.icon_width,
					height: this._props.set.icon_height,
				}
				this.covers[0] = obj
			}

			if (this._props.set.circles == 'show') {
				let ob = {
					latitude: this.latitude,
					longitude: this.longitude,
					color: this._props.set.color,
					fillColor: this._props.set.fill_color,
					radius: this._props.set.radius,
					strokeWidth: this._props.set.stroke_width,
				}
				this.circles[0] = ob
			}
		},
		methods: {

		}
	}
</script>

<style scoped>
	uni-map {
		width: 100% !important;
	}
</style>